<template>
  <div>
    <div class="paytime">
      <div class="pay">
        支付剩余时间

      </div>
      <van-count-down :time="time" />

    </div>
    <div class="paystyle">
      选择支付方式
    </div>

    <div class="payb">
      <div class="payb_1">

        <img src=""
             alt="">
        <div class="zhifubao">
          支付宝
        </div>
      </div>
      <div @click="dian2"
           :class="['weright2',{'weright3':show2} ]">
        <i class="iconfont icon-font40"></i>
      </div>

    </div>
    <div class="wechat">
      <div class="weleft">
        <div class="weleft1">
          <i class="iconfont icon-wechat_pay"></i>
        </div>
        <div class="weleft2">
          微信
        </div>
      </div>

      <div class="weright">
        <div @click="dian"
             :class="['weright2',{'weright3':show} ]">
          <i class="iconfont icon-font40"></i>
        </div>
      </div>
    </div>
    <button @click="pay"
            class="surepay">确认支付</button>
    <div v-html="alipayWap"
         ref="alipayWap"></div>
  </div>

</template>

<script>
import Vue from 'vue';
import { CountDown } from 'vant';

Vue.use(CountDown);
export default {
  name: 'Pay',
  data () {
    return {
      time: 15 * 60 * 1000,
      show: 'true',
      show2: '',
      alipayWap: '',
      addmoney: JSON.parse(localStorage.getItem('jiaqian')),
    };
  },
  methods: {
    pay () {
    
      let date = new Date().getTime();
      this.$axios.post("http://localhost:8888/login/pay", {
        money: this.addmoney,
        subject: "缴费",
        time: date,
      }).then(res => {
        console.log(res);
        this.alipayWap = res;
        this.$nextTick(() => {
          this.$refs.alipayWap.children[0].submit();
        })
      })
        .catch(err => {
          console.log(err);
        })
    }
    ,
    dian () {
      this.show = true
      this.show2 = false
    },
    dian2 () {
      this.show2 = true
      this.show = false
    }
  },
 
}
</script>

<style lang="less">
.weright3 {
  width: 25px;
  height: 25px;
  background-color: rgb(0, 220, 110) !important;
  border-radius: 50%;
  text-align: center;
}
.weright2 {
  width: 25px;
  height: 25px;
  background-color: rgb(204, 204, 204);
  border-radius: 50%;
  text-align: center;
  i {
    color: white;
    font-size: 20px;
  }
}
.weleft2 {
  margin-right: 25px;
  margin-left: 5px;
  font-size: 20px;
  color: rgb(102, 102, 102);
}
.weleft1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(0, 196, 80);
  text-align: center;

  i {
    font-size: 40px;
    color: white;
    line-height: 50px;
  }
}
.wechat {
  width: 100%;
  height: 70px;
  background-color: white;
  display: flex;
  justify-content: space-between;
}
.weleft {
  width: 170px;
  height: 70px;
  display: flex;
  margin-left: 20px;
  align-items: center;
}
.weright {
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.surepay {
  box-sizing: border-box;
  margin-top: 15px;
  margin-left: 9px;
  border: none;
  outline: none;
  border-radius: 5px;
  width: 357px;
  height: 46px;
  color: white;
  background-color: #4cd964;
  font-weight: 700;
  font-size: 18px;
}
.payb_2 {
  width: 26px;
  height: 26px;
  background-color: yellowgreen;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  border-radius: 50%;
}
.payb_1 {
  display: flex;
  align-items: center;
}
.zhifubao {
  margin-left: 5px;
  font-size: 18px;
}
.payb img {
  width: 51.75px;
}
.payb {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 19px 20px;
  justify-content: space-between;
}
.paystyle {
  background-color: #f5f5f5;
  height: 46px;
  box-sizing: border-box;
  padding: 13px 20px;
  font-size: 18px;
}
.pay {
  color: #666;
  font-size: 15.5px;
}
.van-count-down {
  font-size: 39px;
  margin-top: 20px;
  letter-spacing: 0.25em;
  font-weight: 500;
}
.paytime {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 164px;
  background-color: white;
  color: #333;
}
body {
  background-color: #f5f5f5;
}
</style>